window.addEventListener("load", async () => {
    try {
      const res = await axios({
        url: "/dashboard",
      });
  
      const { year, groupData, salaryData, provinceData } = res.data.data;
  
      // 显示预览区域的数据
      const data = res.data.data.overview;
      for (const k in data) {
        document.querySelector(`[name="${k}"]`).innerHTML = data[k];
      }
  
      // 薪资走势
      function salaryEchert(year) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector("#line"));
        const option = {
          title: {
            text: "2022全学科薪资走势",
            left: "2%",
            top: "2%",
          },
          xAxis: {
            type: "category",
            data: year.map((v) => v.month),
            axisLine: {
              lineStyle: {
                color: "#999",
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          tooltip: {
            trigger: "axis",
          },
          
          series: [
            {
              data: year.map((v) => v.salary),
              type: "line",
              smooth: true,
              symbolSize: "10",
              lineStyle: {
                width: 5,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#92c6ff", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#fff", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
          color: ["#62afff"],
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      salaryEchert(year);
  
      // 班级薪资分布
      function salaryPie(salaryData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector("#salary"));
        option = {
          title: {
            text: "班级薪资分布",
            top: "2%",
            left: "2%",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            bottom: "5%",
            left: "center",
          },
          series: [
            {
              name: "班级薪资分布",
              type: "pie",
              radius: ["40%", "50%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: salaryData.map((v) => {
                return {
                  value: v.g_count + v.b_count,
                  name: v.label,
                };
              }),
  
            },
          ],
          color: ["#34d39a", "#fda224", "#5097ff", "#3fceff"],
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      salaryPie(salaryData);
  
      // 小组薪资
      function salaryGroup(groupData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector("#lines"));
  
        const option = {
          xAxis: {
            type: "category",
            data: groupData[1].map((v) => v.name),
            axisLine: {
              lineStyle: {
                color: "#999",
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              data: groupData[1].map((v) => v.hope_salary),
              type: "bar",
            },
            {
              data: groupData[1].map((v) => v.salary),
              type: "bar",
            },
          ],
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#52d7a8", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#d2f4e8", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#4ca0ee", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#d7e9fb", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          ],
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  
        // 点击切换数据
        const btns = document.querySelectorAll("#btns button");
        // console.log(btns);
        btns.forEach((dom) => {
          dom.addEventListener("click", function () {
            // 干掉所有
            document
              .querySelector("#btns .btn-blue")
              .classList.remove("btn-blue");
            // 给自己设置
            this.classList.add("btn-blue");
            // 这个索引就代表了当前点击了哪个组
            const index = this.innerHTML.trim();
            option.xAxis.data = groupData[index].map((v) => v.name);
            option.series[0].data = groupData[index].map((v) => v.hope_salary);
            option.series[1].data = groupData[index].map((v) => v.salary);
            // 重新渲染图表
            myChart.setOption(option);
          });
        });
  
      }
      salaryGroup(groupData);
  
      // 男女薪资分布
      function boyGirlSalary(salaryData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector("#gender"));
        option = {
          title: [
            {
              text: "男女薪资分布",
              left: "2%",
              top: "2%",
            },
            {
              text: "男生",
              left: "center",
              top: "45%",
            },
            {
              text: "女生",
              left: "center",
              top: "85%",
            },
          ],
          series: [
            {
              type: "pie",
              radius: ["18%", "25%"],
              center: ["50%", "30%"],
              data: salaryData.map((v) => {
                return {
                  name: v.label,
                  value: v.b_count,
                };
              }),
              label: {
                position: "outer",
                alignTo: "none",
                bleedMargin: 5,
              },
            },
            {
              type: "pie",
              radius: ["18%", "25%"],
              center: ["50%", "70%"],
              data: salaryData.map((v) => {
                return {
                  name: v.label,
                  value: v.g_count,
                };
              }),
              label: {
                position: "outer",
                alignTo: "labelLine",
                bleedMargin: 5,
              },
            },
          ],
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      boyGirlSalary(salaryData);
  
      // 地图模块
      const initMapChart = (provinceData) => {
        const myEchart = echarts.init(document.querySelector("#map"));
        const dataList = [
          { name: "南海诸岛", value: 0 },
          { name: "北京", value: 0 },
          { name: "天津", value: 0 },
          { name: "上海", value: 0 },
          { name: "重庆", value: 0 },
          { name: "河北", value: 0 },
          { name: "河南", value: 0 },
          { name: "云南", value: 0 },
          { name: "辽宁", value: 0 },
          { name: "黑龙江", value: 0 },
          { name: "湖南", value: 0 },
          { name: "安徽", value: 0 },
          { name: "山东", value: 0 },
          { name: "新疆", value: 0 },
          { name: "江苏", value: 0 },
          { name: "浙江", value: 0 },
          { name: "江西", value: 0 },
          { name: "湖北", value: 0 },
          { name: "广西", value: 0 },
          { name: "甘肃", value: 0 },
          { name: "山西", value: 0 },
          { name: "内蒙古", value: 0 },
          { name: "陕西", value: 0 },
          { name: "吉林", value: 0 },
          { name: "福建", value: 0 },
          { name: "贵州", value: 0 },
          { name: "广东", value: 0 },
          { name: "青海", value: 0 },
          { name: "西藏", value: 0 },
          { name: "四川", value: 0 },
          { name: "宁夏", value: 0 },
          { name: "海南", value: 0 },
          { name: "台湾", value: 0 },
          { name: "香港", value: 0 },
          { name: "澳门", value: 0 },
        ];
  
        // 处理数据
        provinceData.forEach((item) => {
          dataList.find((v) => {
            if (item.name.indexOf(v.name) !== -1) {
              v.value = item.value;
            }
          });
        });
  
        let option = {
          title: {
            text: "籍贯分布",
            top: 10,
            left: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} 位学员",
            borderColor: "transparent",
            backgroundColor: "rgba(0,0,0,0.5)",
            textStyle: {
              color: "#fff",
            },
          },
          visualMap: {
            min: 0,
            max: 6,
            left: "left",
            bottom: "20",
            text: ["6", "0"],
            inRange: {
              color: ["#ffffff", "#0075F0"],
            },
            show: true,
            left: 40,
          },
          geo: {
            map: "china",
            roam: false,
            zoom: 1.0,
            label: {
              normal: {
                show: true,
                fontSize: "10",
                color: "rgba(0,0,0,0.7)",
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)",
                color: "#e0ffff",
              },
              emphasis: {
                areaColor: "#34D39A",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          series: [
            {
              name: "籍贯分布",
              type: "map",
              geoIndex: 0,
              data: dataList,
            },
          ],
        };
        myEchart.setOption(option);
      };
  
      initMapChart(provinceData);
    } catch (err) {
      console.log(err);
    }
  });
     